<template>
	<view class="content">
		<!-- 加注站列表 -->
		<scroll-view v-show="displayModel==='list'" class="fs-list" scroll-y>
			<view class="list" v-for="(item, index) in fsList" :key="item.siteId">
				<view class="item" >
					<view class="line-1 u-f-jsb">
						<view class="">
							<view class="name">{{item.siteName}}</view>
							<view class="u-f-ac">
								<image class="icon" src="../../static/icons/location.png" mode="widthFix"></image>
								<text>{{item.siteAddress}}</text>
							</view>
							<view class="u-f-ac">
								<image class="icon" src="../../static/icons/task.png" mode="widthFix"></image>
								<text>补液任务 {{item.expectCapacity | kg2ton}}吨</text>
							</view>
						</view>
						<view @tap="openMap(item)">
							<image style="width: 100rpx;height: 100rpx;" src="../../static/icons/guide.png" mode="widthFix"></image>
							<view class="distance">{{item.distance}}km</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup v-model="showPopup" mode="center" :mask-close-able="false">
			<view class="popup-container">
				<view class="title">采购确认</view>
				<view class="input-wrapper">
					<view style="margin-bottom: 6rpx;">本次实际采购量：</view>
					<input auto-focus="true" type="digit" v-model="actualCapacity" />
					<text class="unit">吨</text>
				</view>
				<view class="btn-wrapper u-f-ac">
					<view @tap="closePopup">取消</view>
					<view @tap="finishPurchase">完成采购</view>
				</view>
			</view>
		</u-popup>
		<button class="btn" @tap="openPopup">去采购</button>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			fsList: [], //加注站列表数组
			displayModel: 'list', // map--地图模式，list--列表模式
			showPopup: false,
			actualCapacity: null,
			total: 0,
		};
	},
	computed: {
		//登录状态
		isLogin() {
			return this.$store.state.isLogin;
		},
		carinfo() {
			return this.$store.state.carinfo
		}
	},
	onLoad(e) {
		this.orderId = e.orderId
	},
	onReady() {
		this.getLocation();
	},
	methods: {
		finishPurchase() {
			// if(this.total < this.actualCapacity*1000) {
			// 	uni.showModal({
			// 		content: '采购量不能大于总补液量',
			// 		showCancel: false,
			// 	})
			// 	return 
			// }
			this.$http({
				url: this.$api.systemUrl + 'fillstorageorder/completeProcure',
				contentType: 'json',
				data: {
					actualCapacity: this.actualCapacity * 1000,
					carId: this.carinfo.id,
					orderId: this.orderId
				},
				loading: 1
			}).then(res => {
				uni.redirectTo({
					url: '/pages/index/task?orderId=' + this.orderId
				})
			});
		},
		openPopup() {
			this.showPopup = true
		},
		closePopup() {
			this.showPopup = false
		},
		openMap(item) {
			wx.openLocation({//​使用微信内置地图查看位置。
			  latitude: Number(item.latitude),//要去的纬度-地址
			  longitude: Number(item.longitude),//要去的经度-地址
			  name: item.siteName,
			})
		},
		//获取周围的加注站
		getFillStatin() {
			this.$http({
				url: this.$api.systemUrl + 'fillstorageorderdetail/listByOrderId/' + this.orderId,
				method: 'get',
				loading: 0
			}).then(res => {
				let arr = res.data;
				arr.forEach((item, index) => {
					// item = this.convert2TecentMap(item);
					item.distance = this.$mapDistance(
						item.siteLat,
						item.siteLng,
						this.latitude,
						this.longitude
					);
					this.total += Number(item.expectCapacity)
				});
				this.fsList = arr;
			});
		},
		//获取当前位置
		getLocation() {
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					this.$store.commit('setLocation', res);
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.getFillStatin();
				},
				fail: (e) => {
					if(e.errMsg.indexOf('频繁调用') !== -1) {
						return uni.showToast({
							title:'定位太频繁了',
							icon:'none'
						})
					};
					uni.showModal({
						content: '获取位置信息失败，请检查是否打开位置授权',
						showCancel: false,
						success: rs => {
							if (rs.confirm) {
								//#ifdef MP-WEIXIN
								wx.openSetting({});
								//#endif
							}
						}
					});
				}
			});
		},
		convert2TecentMap(obj) {
			if (obj.siteLng == '' && obj.siteLat == '') {
				return obj;
			}
			var x_pi = (3.14159265358979324 * 3000.0) / 180.0;
			var x = obj.siteLng - 0.0065;
			var y = obj.siteLat - 0.006;
			var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
			var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
			var qqlng = z * Math.cos(theta);
			var qqlat = z * Math.sin(theta);
			obj.siteLng = qqlng;
			obj.siteLat = qqlat;
			return obj;
		}
	}
};
</script>

<style lang="scss">
/* 定位按钮 */
.content {
	overflow: hidden;
}
.locate-btn {
	position: fixed;
	right: 32rpx;
	bottom: 100rpx;
	width: 100rpx;
	height: 100rpx;
	z-index: $z-index-public;
}

// 扫码
.scan-wrapper {
	position: fixed;
	bottom: 10px;
	left: 50%;
	width: 320rpx;
	height: 88rpx;
	transform: translateX(-50%);
	background: linear-gradient(90deg, #1F72E5 0%, #4A95FD 100%);
	box-shadow: 0px 0px 12rpx rgba(146,146,146,0.7800);
	border-radius: 50rpx;
	
	.icon-scan {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}
	.text {
		font-size: 34rpx;
		color: #fff;
	}
}

// 加注站列表
.fs-list {
	width: 100%;

	.list {
		padding: 30rpx;
		margin: 0 35rpx;
		margin-top: $spacing-col;
		box-shadow: $box-shadow;
		border-radius: $border-radius-bm;
		background: #fff;
		
		.item {
			.line-1 {
				.name {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 6rpx;
				}
				text {
					display: inline-block;
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
				}
				
				.icon {
					margin-right: 6rpx;
					margin-top: 10rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	.list:last-child {
		margin-bottom: 200rpx;
	}
	
	
}

.btn {
	position: fixed;
	bottom: 30rpx;
	height: 90rpx;
	line-height: 90rpx;
	background: $color-primary;
	color: #fff;
	width: calc(100% - 80rpx);
	margin: 0 40rpx;
	border-radius: 50rpx;
}
	
.popup-container {
	width: 570rpx;
	height: 380rpx;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	
	.title {
		text-align: center;
		line-height: 80rpx;
		margin-top: 10rpx;
	}
	
	.input-wrapper {
		position: relative;
		
		input {
			width: 440rpx;
			height: 45rpx;
			line-height: 45rpx;
			border: 1rpx solid #ccc;
			text-align: center;
			padding-right: 40rpx;
		}
		
		.unit {
			position: absolute;
			right: 20rpx;
			top: 50rpx;
		}
		
	}
	
	.btn-wrapper {
		border-top: 1px solid #eeeeee;
		height: 100rpx;
		width: 100%;
		
		>view {
			flex: 1;
			line-height: 100rpx;
			color: $color-primary;
			text-align: center;
			
			&:first-child {
				border-right: 1rpx solid #eeeeee;
			}
		}
	}
}
.u-drawer .u-mode-center-box {
	transform: translateY(-100rpx);
	border-radius: 16rpx;
}
</style>
